<template>
  <div class="device">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="main">
      <div class="chartsContainer">
        <WaterPoloEchart
          :percentage="percentage.Disk"
          label="磁盘使用率"
          color1='#006CFF'
          color2='#00CFFF'
        ></WaterPoloEchart>

        <WaterPoloEchart
          :percentage="percentage.Mem"
          label="内存使用率"
          color1='#c94148'
          color2='#ea5864'
        ></WaterPoloEchart>

        <WaterPoloEchart
          :percentage="percentage.cpu"
          label="CPU使用率"
          color1='#27c382'
          color2='#2ade91'
        ></WaterPoloEchart>

        <!-- <circular-echarts :percentage="percentage.Disk" :label="'磁盘使用率'" color1='#006CFF' color2='#00CFFF'></circular-echarts> -->
        <!-- <circular-echarts :percentage="percentage.Mem" :label="'内存使用率'" color1='#c94148' color2='#ea5864'></circular-echarts> -->
        <!-- <circular-echarts :percentage="percentage.cpu" :label="'CPU使用率'" color1='#27c382' color2='#2ade91'></circular-echarts> -->
      </div>
    </div>
  </div>
</template>
  
<script>
import circularEcharts from './circularEcharts.vue'
import WaterPoloEchart from './WaterPoloEchart.vue';
import lRTitle from './lRTitle.vue'
import { connrequest2 } from "@/api/firstPage.js"


export default {
  name: "deviceStatus",
  components: {
    lRTitle,
    WaterPoloEchart,
    circularEcharts
  },
  props: {
  },
  data() {
    return {
      statusTitle: "设备运行状态",
      percentage: {}
    }
  },
  created() {
    this.CenterGetFirstPage()
  },
  mounted() { },
  watch: {},
  computed: {},
  methods: {
    async CenterGetFirstPage() {
      const res = await connrequest2('CenterGetFirstPage')
      const { CPURate, DiskUsed, DiskTotal, MemUsed, MemTotal } = res.Data;
      this.percentage = {
        cpu: Math.round(CPURate),
        Disk: DiskTotal === 0 ? 0 : Math.round((DiskUsed / DiskTotal) * 100),
        Mem: MemTotal === 0 ? 0 : Math.round((MemUsed / MemTotal) * 100),
      }
    }
  },
}
</script>
<style scoped>
.device {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 28%;
}

.main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.chartsContainer {
  width: 95%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
</style>